<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Bootstrap 实例 - 边框表格</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        #modifyModal {
            display: none;
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* z-index: 100; */
        }

        .modify-modal-box {
            width: 100%;
            height: 100%;
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #modifyModalContent {
            padding: 30px;
            background-color: #fff;
        }
        #Modal {
            display: none;
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* z-index: 100; */
        }

        .modify-modal-box1 {
            width: 100%;
            height: 100%;
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #modifyModalContent1 {
            padding: 30px;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <button type="button" class="btn btn-default" id="plusBtn">增加</button>
    <table class="table table-bordered" id="table">
        <thead>
            <tr>
                <th></th>
                <th>序号</th>
                <th>名称</th>
                <th>城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr> -->
        </tbody>
    </table>
    <div id="modifyModal">
        <div class="modify-modal-box">
            <div id="modifyModalContent">
                <form id="myform">
                    
                    <div class="row">
                        <label class="col-sm-5">序号：</label>
                        <input type="text" class="col-sm-6" id="infomationId" disabled />
                    </div>
                    <!-- <div><label >学号：</label><input type="text" id="studentId" disabled type="text"> -->
                    <div class="row">
                        <label class="col-sm-5">人的名称：</label>
                        <input type="text" class="col-sm-6" id="infomationName" />
                    </div>
                    <div class="row">
                        <label class="col-sm-5">所在城市：</label>
                        <input type="text" class="col-sm-6" id="infomationCity" />
                    </div>

                    <!--     
                    <div><label >姓名: </label><input type="text" id="studentName"></div>
                    <div><label >性别: </label><input type="text" id="studentSex"></div>
                    <div><label >年龄: </label><input type="text" id="studentAge"></div> -->

                </form>
                <!-- <div>
                    <button id="confirmBtn">确定修改</button>
                    <button id="cancelBtn">取消</button> -->
                <div class="row">
                    <button class="col-sm-4" id="confirmBtn">确定修改</button>
                    <span class="col-sm-3"></span>
                    <button class="col-sm-4" id="cancelBtn">取消</button>
                </div>
                <!-- </div> -->
            </div>
        </div>
    </div>
    <div id="Modal">
        <div class="modify-modal-box1">
            <div id="modifyModalContent1">
                <form id="emptyOne">
                    <div class="row">
                        <label class="col-sm-5">序号：</label>
                        <input type="text" class="col-sm-6" id="infomationIdone" disabled />
                    </div>
                    <!-- <div><label >学号：</label><input type="text" id="studentId" disabled type="text"> -->
                    <div class="row">
                        <label class="col-sm-5">名称：</label>
                        <input type="text" class="col-sm-6" id="infomationNameone" />
                    </div>
                    <div class="row">
                        <label class="col-sm-5">城市：</label>
                        <input type="text" class="col-sm-6" id="infomationCityone" />
                    </div>
                   
                    <!--     
                    <div><label >姓名: </label><input type="text" id="studentName"></div>
                    <div><label >性别: </label><input type="text" id="studentSex"></div>
                    <div><label >年龄: </label><input type="text" id="studentAge"></div> -->

                </form>
                <div class="row">
                    <button class="col-sm-4" id="plusConfirm">确定新增</button>
                    <span class="col-sm-3"></span>
                    <button class="col-sm-4" id="noBtn">取消</button>
                </div>
                <!-- </div> -->
            </div>
        </div>
    </div>
    <script>
        const infomation = [
            { id: 1, name: "李四", city: "重庆" },
            { id: 2, name: "张三", city: "成都" },
        ];
        function renderList(data) {
            $("#table > tbody ").empty();
            for (let i = 0; i < data.length; i++) {
                const item = data[i]
                $("#table>tbody").append(
                    `
         
        <tr>
            <td>
            <input data-id="${item.id}" type="checkbox"  >
            </td>
            <td>${item.id}</td>
          <td>${item.name}</td>
          <td>${item.city}</td>
          <td>
            <button  data-id="${item.id}" type="button" class="btn btn-danger" id="trash">删除</button>
            <button  data-id="${item.id}" type="button" class="btn btn-info" id="edit">修改</button>
          </td>
        </tr>
            `

                )
            }
        }
        renderList(infomation)
        // 删除按钮处理
        $("#table>tbody").on("click", "#trash", function (event) {
            const dataId = parseInt($(event.target).attr("data-id"))
            for (let i = 0; i < infomation.length; i++) {
                // 删除id相同的
                if (infomation[i].id === dataId) {
                    infomation.splice(i, 1)
                }
            }
            renderList(infomation)
        })
        // 修改按钮处理
        $("#table>tbody").on("click", "#edit", function (event) {
            const dataId = parseInt($(event.target).attr("data-id"))
            $("#modifyModal").show()
            // 数组提供了一个 查找的方法  filter map
            const currentInfomation = infomation.find((item) => {
                return item.id === dataId
            })
            $("#infomationId").val(currentInfomation.id)
            $("#infomationName").val(currentInfomation.name)
            $("#infomationCity").val(currentInfomation.city)
            
        })
        // 关闭弹窗
        $("#cancelBtn").on("click", function () {
            $("#modifyModal").hide()
        })
        // 确认修改
        $("#confirmBtn").on("click", (event) => {
            // 获取input的值
            let id = parseInt($("#infomationId").val())
            let name = $("#infomationName").val()
            let city = $("#infomationCity").val()
            console.log({ name, city });
            for (let i = 0; i < infomation.length; i++) {
                const item = infomation[i]
                console.log(item);
                if (item.id === parseInt(id)) {
                    item.name = name
                    item.city = city
                }
            }
            // 重新渲染
            renderList(infomation)
            // 隐藏弹框
            $("#modifyModal").hide()
           infomationName.val(" ")
           infomationCity.val(" ")
            
        })
        // 新增按钮的点击事件
        $("#plusBtn").on("click",function(event){
            $("#Modal").show()
        })
        // 确定新增按钮 点击事件
        $("#plusConfirm").on("click",function(){
            let obj = {
                id: parseInt(infomation.length)+1,
                name: $("#infomationNameone").val(),
                city: $("#infomationCityone").val(),
            }
            console.log(obj);
            infomation.push(obj);
            renderList(infomation)
            $("#Modal").hide()
            const form=document.querySelector("#emptyOne")
            form.reset()
        })
        // 取消按钮
        $("#noBtn").on("click",function(){
            $("#Modal").hide()
        })
    </script>
</body>

</html>